<template>
  <div class="fix-test-container">
    <div class="test-card">
      <h2>🔧 修复验证测试</h2>
      
      <div class="test-section">
        <h3>1. 中介申请表单测试</h3>
        <p>测试数据映射和验证是否正确</p>
        <el-button @click="testAgentForm" type="primary">测试中介申请表单</el-button>
        <p class="result">{{ results.agentForm }}</p>
      </div>

      <div class="test-section">
        <h3>2. Token获取测试</h3>
        <p>测试getToken函数是否正常工作</p>
        <el-button @click="testToken" type="primary">测试Token获取</el-button>
        <p class="result">{{ results.token }}</p>
      </div>

      <div class="test-section">
        <h3>3. 实名认证测试</h3>
        <p>测试实名认证功能（中介申请前必须先实名认证）</p>
        <el-button @click="testIdentityVerification" type="primary">测试实名认证</el-button>
        <p class="result">{{ results.identity }}</p>
      </div>

      <div class="test-section">
        <h3>4. 申请状态测试</h3>
        <p>测试暂未申请状态显示</p>
        <el-button @click="testApplicationStatus" type="primary">测试申请状态</el-button>
        <p class="result">{{ results.status }}</p>
      </div>

      <div class="test-section">
        <h3>5. 房源列表测试</h3>
        <p>测试空状态显示</p>
        <el-button @click="testHouseList" type="primary">测试房源列表</el-button>
        <p class="result">{{ results.houses }}</p>
      </div>

      <div class="test-section">
        <h3>6. 登出功能测试</h3>
        <p>测试登出是否正常</p>
        <el-button @click="testLogout" type="warning">测试登出功能</el-button>
        <p class="result">{{ results.logout }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getToken, userLogout } from '@/utils/auth'
import api from '@/utils/api'

// 测试结果
const results = reactive({
  agentForm: '',
  token: '',
  identity: '',
  status: '',
  houses: '',
  logout: ''
})

// 1. 测试中介申请表单数据
const testAgentForm = () => {
  const testData = {
    licenseNo: 'TEST123456789',
    licensePicPath: 'https://example.com/license.jpg',
    phone: '13800138000',
    companyName: '测试中介公司',
    companyPosition: '高级房产经纪人',
    realName: '张三',
    idCard: '110101199001011234',
    email: 'test@qq.com',
    city: '北京市',
    workYears: 3
  }
  
  results.agentForm = `✅ 表单数据结构正确: ${JSON.stringify(testData, null, 2)}`
  ElMessage.success('表单数据结构验证通过')
}

// 2. 测试Token获取
const testToken = () => {
  try {
    const token = getToken()
    if (token) {
      results.token = `✅ Token获取成功: ${token.substring(0, 20)}...`
      ElMessage.success('Token获取正常')
    } else {
      results.token = `❌ Token为空，请先登录`
      ElMessage.warning('请先登录')
    }
  } catch (error) {
    results.token = `❌ Token获取失败: ${error.message}`
    ElMessage.error('Token获取失败')
  }
}

// 3. 测试实名认证
const testIdentityVerification = async () => {
  try {
    const identityData = {
      realName: '张三',
      identityCard: '110101199001011234'
    }

    const response = await api.post('/user/verify-identity', identityData, {
      headers: {
        'info': getToken()
      }
    })

    if (response.data.code === 200) {
      results.identity = `✅ 实名认证成功: ${response.data.message}`
      ElMessage.success('实名认证成功')
    } else {
      results.identity = `❌ 实名认证失败: ${response.data.message}`
      ElMessage.error('实名认证失败')
    }
  } catch (error) {
    results.identity = `❌ 实名认证失败: ${error.response?.data?.message || error.message}`
    ElMessage.error('实名认证失败')
  }
}

// 4. 测试申请状态
const testApplicationStatus = async () => {
  try {
    const response = await api.get('/agent/auth/result', {
      headers: {
        'info': getToken()
      }
    })
    
    if (response.data.code === 200 && response.data.data) {
      results.status = `✅ 有申请记录: ${JSON.stringify(response.data.data, null, 2)}`
    } else {
      results.status = `✅ 暂未申请状态正常显示`
    }
    ElMessage.success('申请状态测试完成')
  } catch (error) {
    if (error.response?.status === 404) {
      results.status = `✅ 暂未申请状态正常显示 (404错误)`
      ElMessage.success('暂未申请状态正常')
    } else {
      results.status = `❌ 状态获取失败: ${error.message}`
      ElMessage.error('状态获取失败')
    }
  }
}

// 5. 测试房源列表
const testHouseList = async () => {
  try {
    const response = await api.get('/agent-rental/getAllAgentHouse', {
      headers: {
        'info': getToken()
      }
    })
    
    if (response.data.code === 200) {
      const houses = response.data.data || []
      results.houses = `✅ 房源列表获取成功，共 ${houses.length} 条记录`
      ElMessage.success('房源列表测试完成')
    }
  } catch (error) {
    results.houses = `❌ 房源列表获取失败: ${error.message}`
    ElMessage.error('房源列表获取失败')
  }
}

// 6. 测试登出功能
const testLogout = async () => {
  try {
    await userLogout()
    results.logout = `✅ 登出功能正常`
    ElMessage.success('登出测试完成')
  } catch (error) {
    results.logout = `❌ 登出失败: ${error.message}`
    ElMessage.error('登出测试失败')
  }
}
</script>

<style scoped>
.fix-test-container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.test-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.test-card h2 {
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  background: #f8f9fa;
}

.test-section h3 {
  margin-top: 0;
  color: #34495e;
  margin-bottom: 10px;
}

.test-section p {
  color: #7f8c8d;
  margin-bottom: 15px;
}

.result {
  margin-top: 15px;
  padding: 15px;
  background: #ffffff;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  border-left: 4px solid #3498db;
  max-height: 200px;
  overflow-y: auto;
}

.el-button {
  margin-right: 10px;
}
</style>
